<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <title>Title</title>
</head>
<body>
<div>
<header th:replace="common/top">
</header>
<div id="Catalog">
    <form action="/order/conFirmOrderForm" method="post" th:object="${order}">
        <table>
            <tr>
                <th colspan=2>Payment Details</th>
            </tr>
            <tr>
                <td>Card Type:</td>
                <td>
                    <select>
                        <option th:each="cardType:${cardTypeList}" th:value="${cardType}" th:text="${cardType}">

                        </option>
<!--                        <option value="Visa" selected="selected">Visa</option>-->
<!--                        <option value="MasterCard">MasterCard</option>-->
<!--                        <option value="American Express">American Express</option>-->
                    </select>
                </td>
            </tr>
            <tr>
                <td>Card Number:</td>
                <td>
                    <input type="text" th:field="*{creditCard}"/>* Use a fake number!
                </td>
            </tr>
            <tr>
                <td>Expiry Date (MM/YYYY):</td>
                <td>
                    <input type="text" th:field="*{expiryDate}" />
                </td>
            </tr>

            <tr>
                <th colspan=2>Billing Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td>
                    <input type="text" th:field="*{billToFirstName}" />
                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td>
                    <input type="text" th:field="*{billToLastName}"  />
                </td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td>
                    <input type="text" size="40" th:field="*{billAddress1}"  />
                </td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td>
                    <input type="text" size="40" th:field="*{billAddress2}" />
                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td>
                    <input type="text" th:field="*{billCity}"/>
                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td>
                    <input type="text" size="4" th:field="*{billState}" />
                </td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td>
                    <input type="text" size="10" th:field="*{billZip}" />
                </td>
            </tr>
            <tr>
                <td>Country:</td>
                <td>
                    <input type="text" size="15" th:field="*{billCountry}" />
                </td>
            </tr>

            <tr>
                <td colspan=2>
                    <input type="checkbox" name="shippingAddressRequired"/>
                    Ship to different address...
                </td>
            </tr>
        </table>
        <input type="submit" name="newOrder" value="Continue"/>
    </form>
</div>

    <footer th:replace="common/bottom">
    </footer>
</div>
</body>
</html>